// .login-container {
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   position: relative;
//   // background-image: url('../assets/image/11.gif');;
//   // background-repeat: no-repeat;
//   // background-size: 100% 100%;
//   background-color: #f0f0f0;
//   .login-content {
//     width: 300px;
//     height: 200px;
//     position: absolute;
//     left: 0;
//     right: 0;
//     top: 0;
//     bottom: 0;
//     margin: auto;
//     display: flex;
//     flex-direction: column;
//     justify-content: space-around;
//     // align-items: center;
//   }
//   .login-button {
//     width: 100px;
//   }
// }
// .animation1 {
//   width: 100%;
//   height: 100%;
//   background-image: url('../assets/image/4.jpeg');
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }
// .animation2 {
//   width: 100%;
//   height: 100%;
//   background-image: url('../assets/image/2.jpeg');
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }
// .animation3 {
//   width: 100%;
//   height: 100%;
//   background-image: url('../assets/image/5.jpeg');
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }

// .login-css {
//   width: 100%;
//   height: 100%;
//   background-image: url('../assets/image/11.gif');
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }
// @themeBg:#f9a1a1;
// @pleaceholderColor:#ccc;

// //背景透明
// .transparent {
//   background-color: transparent;
// }
// .middle {
//   vertical-align: middle;
// }
// .login-container {
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   position: relative;
//   // background-image: url('../assets/image/11.gif');;
//   // background-repeat: no-repeat;
//   // background-size: 100% 100%;
//   //background-color: #f0f0f0;
//   background: @themeBg;
//   .login-content {
//     width: 100vw;
//     height: 100%;
//     position: absolute;
//     left: 0;
//     right: 0;
//     top: 0;
//     bottom: 0;
//     margin: auto;
//     display: flex;
//     flex-direction: column;
//     //justify-content: space-around;
//     align-items: center;
//     //background: rgb(223, 133, 133);
//     // background: @themeBg;
//       >div {
//         min-height: 30px;
//           &:nth-of-type(1){
//             // margin-top: 100px;
//           }
//           &:nth-of-type(2){
//             margin: 20px auto;
//             max-width: 150px;
//             min-height: 100px;
//             border-radius: 50%;
//             overflow: hidden;
//             margin-bottom: 10px;
//               img {
//                 width: 100%;
//                 height: inherit;
//               }
//           }
//           &:nth-of-type(5){
//             margin-top: 10px;
//             label {
//               margin: 5px;
//               font-size: 12px;
//               .middle;
//               display: inline-block;
//               height: 25px;
//               line-height:25px;
//               input[type="radio"] + span::before{
//                 content: ""; 
//                 display: inline-block;
//                 .middle;
//                 font-size: 12px;
//                 width: 24px;
//                 height: 20px;
//                 background: #fff;
//                 margin: 0 5px;
//               }
//               input[type="radio"]:checked + span::before {
//                 background-color: #0078D7;
//               }
//               input[type="radio"] {
//                 position: absolute;
//                 clip: rect(0, 0, 0, 0);
//               }
//             }
//           }
//       }
//   }
//   .login-button {
//     width: 160px; 
//       &:nth-of-type(1){
//         background: #fff;
//         padding: 10px 0;
//         border-radius: 5px;
//         margin: 10px 0;
//       }
//       &:nth-of-type(2){
//         .transparent;
//         color: #0078D7;
//         margin-bottom: 5px;
//       }
//   }
//   .login-title {
//     font-size: 36px;
//     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
//   }
//   .project-name {
//     font-size: 24px;
//   }
//   input {
//     border: none;
//     .transparent;
//     text-align: center;
//     padding: 5px 0;
//     outline:none;
//     border-bottom: 1px solid #fff;
//       &:-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
//         color: @pleaceholderColor;
//       }
//   }
//   button {
//     border: none;
//     outline: none;
//       &:hover{
//         cursor: pointer;
//       }
//   }
//   a {
//     font-size: 12px;
//     color: #6587FF;
//   }
// }
.animation1 {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/image/4.jpeg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.animation2 {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/image/2.jpeg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.animation3 {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/image/5.jpeg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-css {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/image/11.gif');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@keyframes tada {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}





// .login-container {
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   position: relative;
//   background: url(../assets/image/bg1.jpg) no-repeat 0px 0px;
//   // background-image: url('./bg.jpg');
//   // background: url(./adm.png) no-repeat 0px 7px;
// 		background-size: 100% 100%;
//   .login-content {
//     width: 100vw;
//     height: 100%;
//     position: absolute;
//     left: 0;
//     right: 0;
//     top: 0;
//     bottom: 0;
//     margin: auto;
//     display: flex;
//     // flex-direction: column;
//     //justify-content: space-around;
//     // align-items: center;
//     //background: rgb(223, 133, 133);
//     // background: @themeBg;
//       >div {
//         min-height: 30px;
//           &:nth-of-type(1){
//             // margin-top: 110px;
//           }
//           &:nth-of-type(2){
//             margin: 20px auto;
//             // max-width: 150px;
//             // min-height: 100px;
//             // border-radius: 50%;
//             overflow: hidden;
//             margin-bottom: 10px;
//               img {
//                 // width: 100%;
//                 // height: inherit;
//                 width: 100px;
//                 height: 100px;
//                 min-width: 100px;
//                 min-height: 100px;
//                 border-radius: 50%;
//               }
//           }
//           &:nth-of-type(5){
//             margin-top: 10px;
//             label {
//               margin: 5px;
//               font-size: 12px;
//               .middle;
//               display: inline-block;
//               height: 25px;
//               line-height:25px;
//               input[type="radio"] + span::before{
//                 content: ""; 
//                 display: inline-block;
//                 .middle;
//                 font-size: 12px;
//                 width: 24px;
//                 height: 20px;
//                 background: #fff;
//                 margin: 0 5px;
//               }
//               input[type="radio"]:checked + span::before {
//                 background-color: #0078D7;
//               }
//               input[type="radio"] {
//                 position: absolute;
//                 clip: rect(0, 0, 0, 0);
//               }
//             }
//           }
//       }
      // .tui-checkbox:checked {
      //   background:#1673ff
      // }
      // .tui-checkbox {
      //   width:18px;
      //   height:18px;
      //   background-color:#ffffff;
      //   border:solid 1px #dddddd;
      //   -webkit-border-radius:50%;
      //   border-radius:50%;
      //   font-size:0.8rem;
      //   margin-right: 5px;
      //   padding:0;
      //   position:relative;
      //   display:inline-block;
      //   vertical-align:middle;
      //   cursor:default;
      //   -webkit-appearance:none;
      //   -webkit-user-select:none;
      //   user-select:none;
      //   -webkit-transition:background-color ease 0.1s;
      //   transition:background-color ease 0.1s;
      //   cursor: pointer;
      // }
      // .tui-checkbox:checked::after {
      //   content:'';
      //   top:2px;
      //   left:3px;
      //   position:absolute;
      //   background:transparent;
      //   border:#fff solid 2px;
      //   border-top:none;
      //   border-right:none;
      //   height:6px;
      //   width:10px;
      //   -moz-transform:rotate(-45deg);
      //   -ms-transform:rotate(-45deg);
      //   -webkit-transform:rotate(-45deg);
      //   transform:rotate(-45deg);
      // }
  // }
//   .login-button {
//     width: 160px; 
//       &:nth-of-type(1){
//         // background: #fff;
//         // padding: 10px 0;
//         // border-radius: 5px;
//         // margin: 10px 0;
//         width: 200px;
//         height: 30px;
//         color:white;
//         background-color:#483E57;
//         border-radius: 3px;
//         border-width: 0;
//         margin: 0;
//         line-height: 10px;
//         outline: none;
//         font-family: KaiTi;
//         font-size: 17px;
//         text-align: center;
//         cursor: pointer;
//         &:hover{
//           background-color: #544157;
//         }
//       }
//       &:nth-of-type(2){
//         .transparent;
//         color: #0078D7;
//         margin-bottom: 5px;
//       }
//   }
//   .login-title {
//     font-size: 36px;
//     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
//   }
//   .project-name {
//     font-size: 24px;
//   }
//   input {
//     width: 110px;
//     padding: .5em 1em .5em 2.5em;
//     // color: #9199aa;
//     font-size: 18px;
//     outline: none;
//     background-size: 20px;
//     border: none;
//     font-weight: 100;
//     border-bottom: .5px solid#484856;
//     &:nth-of-type(1){
//       background: url(../assets/image/adm.png) no-repeat 0px 7px;
//     }
//   }
//   input[type="password"]{
//     background: url(../assets/image/key.png) no-repeat 0px 12px;
//   }
//   button {
//     border: none;
//     outline: none;
//       &:hover{
//         cursor: pointer;
//       }
//   }
//   a {
//     font-size: 12px;
//     color: #6587FF;
//     color: crimson;
//     text-decoration: none;
//     cursor: pointer;
//   }
// }



.login-container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: url(../../assets/image/bg1.jpg) no-repeat 0px 0px;
  background-size: 100% 100%;
  .login-content{
    padding: 2em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #f5f5f5a1;
    // background: rgba(0, 0, 0, 0.1);
    // opacity: 0.1;
    .login-name{
      // padding-top: 70px;
      label{
        font-size: 40px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color: #ffcf00;
        // 27398
      }
    }
    .imgCon{
      margin-top: 20px;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        &:hover {
          animation: tada 1s;
        }
      }
    }
    .form-name{
      margin-top: 20px;
      input{

        width: 130px;
        padding: .5em 2em .5em 2.5em;
        color: #000;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        outline: none;
        background: url(../../assets/image/adm.png) no-repeat 0px 7px;
        background-size: 20px;
        border: none;
        font-weight: 100;
        border-bottom: .5px solid#9c9cbd;
        &::-webkit-input-placeholder{
          color: rgb(163, 169, 185);
        }
        &::-moz-placeholder{
          color: rgb(163, 169, 185);
        }
        &::-ms-input-placeholder{
          color: rgb(163, 169, 185);
        }
      }
    }
    .form-password{
      position: relative;
      margin-top: 20px;
      input{

        width: 130px;
        padding: .5em 2em .5em 2.5em;
        color: #000;
        font-size: 18px;
        outline: none;
        background: url(../../assets/image/key.png) no-repeat 0px 10px;
        background-size: 20px;
        border: none;
        font-weight: 100;
        border-bottom: .5px solid#9c9cbd;
        &::-webkit-input-placeholder{
          color: rgb(163, 169, 185);
        }
        &::-moz-placeholder{
          color: rgb(163, 169, 185);
        }
        &::-ms-input-placeholder{
          color: rgb(163, 169, 185);
        }
      }
    }
    ::-webkit-input-placeholder {
      color: #f5f5f5a1;
      font-size: 17px;    }
    .show-pwd {
      position: absolute;
      right: .2em;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background: url(../../assets/image/eye.png) no-repeat center;
      background-size: 24px auto;
      cursor: pointer;
    }
    .form-checkbox{
      margin-top: 20px;
      label{
        &:nth-of-type(1){
          margin-right: 10px;
        }
        span{
          color: rgb(212, 211, 211);
        }
      }
      .tui-checkbox:checked {
        background:#1673ff
      }
      .tui-checkbox {
        width:18px;
        height:18px;
        //background-color:#ffffff;
        background-color: #f5f5f5;
        border:solid 1px #dddddd;
        -webkit-border-radius:50%;
        border-radius:50%;
        font-size:0.8rem;
        margin-right: 5px;
        padding:0;
        position:relative;
        display:inline-block;
        vertical-align:middle;
        cursor:default;
        -webkit-appearance:none;
        -webkit-user-select:none;
        user-select:none;
        -webkit-transition:background-color ease 0.1s;
        transition:background-color ease 0.1s;
        cursor: pointer;
      }
      .tui-checkbox:checked::after {
        content:'';
        top:2px;
        left:3px;
        position:absolute;
        background:transparent;
        border:#fff solid 2px;
        border-top:none;
        border-right:none;
        height:6px;
        width:10px;
        -moz-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg);
        transform:rotate(-45deg);
      }
    }
    .form-login{
      margin-top: 20px;
      .login-button{
        width: 200px;
        height: 35px;
        color:white;
        background-color: #2283D2;
        opacity: 0.5;
        border-radius: 3px;
        border-width: 0;
        margin: 0;
        outline: none;
        font-family: KaiTi;
        font-size: 17px;
        text-align: center;
        cursor: pointer;
        &:hover{
          background-color: #106ABD;
        }
      }
    }
    .form-other{
      margin-top: 20px;
      font-family: KaiTi;
      a{
        text-decoration: none;
        color: crimson;
        &:nth-of-type(1){
          color: #fff;
          margin-right: 20px;
        }
      }
    }
  }
}